<template>
    <div>
        <!-- 筛选条件 of start -->
        <div class="statistics_search_container">
            <Screen @submit="onSubmit"></Screen>
        </div>
        <!-- 筛选条件 of end -->

        <!-- 数据概览 of start -->
        <DataOverview ref="DataOverviewRef" />
        <!-- 数据概览 of end -->

        <!-- 趋势图 of start -->
        <Statistics ref="StatisticsRef" />
        <!-- 趋势图 of end -->
    </div>
</template>

<script setup>
import { ref, reactive, watch, nextTick } from 'vue';
import { useRoute } from 'vue-router';

import Screen from './components/Screen.vue';
import DataOverview from './components/DataOverview/index.vue';
import Statistics from './components/Statistics/index.vue';

const routers = useRoute();

const { source } = Number(routers.query);

let queryStore = reactive({});
const searchParams = ref(null);
const StatisticsRef = ref(null);
const DataOverviewRef = ref(null);

/** 筛选条件 of start  */

const onSubmit = data => {
    nextTick(() => {
        const params = {
            shop_id: queryStore.shop_id,
            start_date: data?.times ? data?.times[0] : data?.date[0],
            end_date: data?.times ? data?.times[1] : data?.date[1],
            promotion_type: data.promotion_type,
            promotion_way: data.promotion_way,
            account_ids: data.account_ids,
            product_ids: data.product_ids
        };
        // 数据概览
        DataOverviewRef.value.getData(params);
        // 趋势图
        StatisticsRef.value.getData(params);
    });
};
/** 筛选条件 of start  */

defineExpose({
    onSubmit
});
watch(
    () => routers.query,
    val => {
        // source  1-客易达  2-有赞 3-淘宝 4-自营 5-线下门店
        let { shop_id, name, source_name, source, logo, retail_shop_id } = val;
        shop_id = decodeURIComponent(shop_id);
        name = decodeURIComponent(name);
        source_name = decodeURIComponent(source_name);
        source = decodeURIComponent(source);
        logo = decodeURIComponent(logo);
        retail_shop_id = decodeURIComponent(retail_shop_id);
        queryStore = Object.assign({}, queryStore, { shop_id, name, source_name, source, logo, retail_shop_id });
    },
    { deep: true, immediate: true }
);
</script>

<style lang="scss">
.statistics_search_container {
    width: 100%;
}
</style>
